<template>
    <div class="devices">
        <el-header>
            <p>我的设备</p>
        </el-header>
        <el-main>
            <div class="vehicle">
                <p>我的车辆</p>
                <el-table
                    class="vehicle-table"
                    :data="tableData"
                    style="width: 100%"
                    border>
                    <el-table-column
                        prop="id"
                        label="序号"
                        width="50"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="vin"
                        label="Vin码"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="license"
                        label="车牌">
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="车系车型">
                    </el-table-column>
                    <el-table-column
                        prop="time"
                        label="上次登录时间">
                    </el-table-column>
                    <el-table-column label="详情" width="80">
                        <template slot-scope="scope">
                            <el-link style="color: #4065E0" @click="handleLook(scope.$index, scope.row)">查看</el-link>
                        </template>
                    </el-table-column>
                    
                </el-table>
            </div>
            <div class="vehicle">
                <p>我的手机</p>
                <el-table
                    class="phone-table"
                    :data="phoneDate"
                    style="width: 100%"
                    border>
                    <el-table-column
                        prop="id"
                        label="序号"
                        width="50"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="typeNum"
                        label="设备型号"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="time"
                        label="上次登录时间">
                    </el-table-column>
                </el-table>
            </div>
        </el-main>
        <router-view></router-view>
    </div>
</template>

<script>
import { vehicleList } from '@/api/userInfo/userInfo'
export default {
    name: 'Devices',
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    vin: '1G1BL52P7TR115520',
                    license: '沪A 88888',
                    type: '东风雪铁龙',
                    time: '2019-07-29 14:35:34'
                }
            ],
            phoneDate: [
                {
                    id: 1,
                    typeNum: '华为mate20  Android 10.4',
                    time: '2019-07-29 14:35:34'
                }
            ]
        }
    },
    methods: {
        // 查看
        handleLook(index, row){
            this.$router.push({ name: 'VehcleDetail' })
        },
        // 获取我的车辆信息
        getVehicleList(){
            vehicleList().then(res => {
                console.log(res)
            })
        }
        
    },

    created(){
        // this.getVehicleList()
    }
}
</script>

<style lang="scss" scoped>
.devices{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    .el-header{
        height: 64px !important;
        line-height: 64px;
        p{
            font-weight: bold;
        }
    }
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 64px;
        .vehicle{
            margin-top: 20px;
            p{
                color: #666666;
            }
            .vehicle-table,.phone-table{
                margin-top: 20px;
            }
            
        }
    }
}
</style>



